<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../../../yl/index.css" />
    <link rel="stylesheet" href="../../../style/index.css" />
    <title>问卷调查</title>
  </head>

  <body>
    <div id="app" v-cloak>
      <div class="title">
        <div style="padding: 5px">
          标题：<el-input
            v-model="page.value1"
            style="width: 200px; margin: 0 10px"
            placeholder="请输入标题"
          ></el-input>
          <el-button
            icon="Search"
            style="margin: 0; margin-right: 10px"
            @click="check"
            >查询</el-button
          >
          <el-button
            icon="Refresh"
            style="margin: 0; margin-right: 10px"
            @click="reset"
            >重置</el-button
          >

          <el-button
            type="primary"
            icon="CirclePlus"
            style="margin: 0; margin-right: 10px"
            @click="personalAdd"
            plain
            round
            >添加</el-button
          >
          <!-- <el-button type="warning" icon="Download" style="margin: 0; margin-right: 10px;" @click="personalAdd"
                    plain round>批量导入</el-button>
                <el-button type="success" icon="Upload" style="margin: 0; margin-right: 10px;" @click="personalAdd"
                    plain round>批量导出</el-button>
                <el-button type="danger" icon="Delete" style="margin: 0; margin-right: 10px;" @click="personalAdd" plain
                    round>批量删除</el-button> -->
        </div>
      </div>
      <div class="body">
        <div class="left">
          <el-tree
            ref="tree"
            id="tree"
            default-expand-all
            :expand-on-click-node="false"
            :data-options="JSON.stringify({ 'TableName': 'personal_points_application_type', 'NodeCode': '','primary_key':'Personal_Points_Application_Type_SerialNumber' })"
            style="max-width: 600px"
            :data="treeData"
            @node-click="handleNodeClick"
            :props="{ label: 'Personal_Points_Application_Type' }"
          >
            <template #default="{ node, data }">
              <div class="custom-tree-node">
                <span>{{ node.label }}</span>
              </div>
            </template>
          </el-tree>
        </div>
        <div class="right">
          <el-tabs
            v-model="page.activeName"
            type="card"
            @tab-click="handleClick"
          >
            <el-tab-pane name="first">
              <template #label>
                <div
                  style="
                    width: 10px;
                    height: 10px;
                    background: linear-gradient(
                      to right,
                      #409eff,
                      #67c23a,
                      #e6a23c,
                      #909399
                    );
                    margin-right: 10px;
                  "
                ></div>
                全部
              </template>
            </el-tab-pane>
            <el-tab-pane name="second">
              <template #label>
                <div
                  style="
                    width: 10px;
                    height: 10px;
                    background-color: #409eff;
                    margin-right: 10px;
                  "
                ></div>
                未发布
              </template>
            </el-tab-pane>
            <el-tab-pane name="third">
              <template #label>
                <div
                  style="
                    width: 10px;
                    height: 10px;
                    background-color: #67c23a;
                    margin-right: 10px;
                  "
                ></div>
                已发布
              </template>
            </el-tab-pane>
            <el-tab-pane name="fourth">
              <template #label>
                <div
                  style="
                    width: 10px;
                    height: 10px;
                    background-color: #e6a23c;
                    margin-right: 10px;
                  "
                ></div>
                进行中
              </template>
            </el-tab-pane>
            <el-tab-pane name="fifth">
              <template #label>
                <div
                  style="
                    width: 10px;
                    height: 10px;
                    background-color: #909399;
                    margin-right: 10px;
                  "
                ></div>
                已结束
              </template>
            </el-tab-pane>
          </el-tabs>
          <el-table
            id="table"
            border
            :data-options="JSON.stringify({ 'TableName': 'questionnaire','primary_key':'Questionnaire_SerialNumber'})"
            height="450"
            v-loading="loading"
            ref="multipleTable"
            tooltip-effect="dark"
            :data="Tabletdata"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              fixed="left"
              align="center"
              label="标识"
              width="60"
            >
              <template v-slot="{row}">
                <div
                  style="width: 100%; display: flex; justify-content: center"
                >
                  <div
                    :style="{backgroundColor:isStatus(row).color}"
                    style="width: 10px; height: 10px; border-radius: 50%"
                  ></div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              min-width="180"
              v-for="column in columns"
              :key="column.COLUMN_NAME"
              :prop="column.COLUMN_NAME"
              show-overflow-tooltip
              :label="column.COLUMN_COMMENT"
            >
              <template v-slot="{row}">
                <div v-if="isValueType(row[column.COLUMN_NAME])=='image'">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="photo + row[column.COLUMN_NAME]"
                    fit="contain"
                  ></el-image>
                </div>
                <template v-else> {{row[column.COLUMN_NAME]}} </template>
              </template>
            </el-table-column>
            <el-table-column
              width="90"
              fixed="right"
              align="center"
              label="状态"
            >
              <template v-slot="{row}">
                <el-tag :type="isStatus(row).value"
                  >{{isStatus(row).label}}</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="160">
              <template #default="{row}">
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 100%;
                  "
                >
                  <el-button
                    :disabled="row.Row_Status == '0'"
                    :type="row.Row_Status == '0'?'info':'success'"
                    style="margin-right: 10px"
                    size="small"
                    @click="handle2(row)"
                  >
                    发布
                  </el-button>
                  <el-dropdown trigger="click">
                    <el-button size="small" type="danger">
                      更多<el-icon class="el-icon--right"
                        ><arrow-down
                      /></el-icon>
                    </el-button>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item
                          v-if="row.Row_Status == '2'"
                          @click="handleEdit(row)"
                        >
                          编辑
                        </el-dropdown-item>
                        <el-dropdown-item @click="handleDelete(row)">
                          删除
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            style="margin-top: 1%"
            :current-page="page.PageNumber"
            :page-size="page.RowAmount"
            :page-sizes="[10, 100, 200, 300, 400]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="Total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <el-dialog
        v-model="showDialog"
        width="800"
        class="custom-dialog"
        :destroy-on-close="true"
        :close-on-click-modal="false"
      >
        <template #header>
          <div class="dialog-header">
            <span>审核通过并发放积分</span>
          </div>
        </template>
        <el-form
          :model="form1"
          ref="form"
          :inline-message="true"
          style="width: 100%"
        >
          <el-descriptions
            style="width: 100%; margin-left: 10px"
            :column="1"
            size="large"
            border
          >
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">积分类型</div>
              </template>
              <el-form-item
                prop="Points_Type"
                style="margin-bottom: 0"
                :rules="[{ required: true, message: '请选择积分类型', trigger: 'change' }]"
              >
                <el-select
                  disabled
                  v-model.trim="form1.Points_Type"
                  placeholder="请选择积分类型"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item,index) in [{value:'0',label:'村民积分'},{value:'1',label:'党员积分'}]"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">当前剩余积分</div>
              </template>
              <el-form-item prop="Remain_Points" style="margin-bottom: 0">
                {{form1.Remain_Points}}
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">发放积分</div>
              </template>
              <el-form-item prop="Points" style="margin-bottom: 0">
                <el-input-number
                  v-model.trim="form1.Points"
                  :min="1"
                ></el-input-number>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">备注</div>
              </template>
              <el-form-item prop="Notes" style="margin-bottom: 0">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 2}"
                  v-model="form1.Notes"
                  class="borderless-input"
                  placeholder="可输入备注"
                />
              </el-form-item>
            </el-descriptions-item>
          </el-descriptions>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showDialog = false" class="cancel-btn"
              >取消</el-button
            >
            <el-button
              type="primary"
              :loading="loading"
              @click="handleSubmit"
              class="confirm-btn"
              >提交</el-button
            >
          </div>
        </template>
      </el-dialog>
      <el-dialog
        v-model="showDialog1"
        width="800"
        class="custom-dialog"
        :destroy-on-close="true"
        :close-on-click-modal="false"
      >
        <template #header>
          <div class="dialog-header">
            <span>查看附件</span>
          </div>
        </template>
        <el-table
          id="table"
          border
          max-height="450"
          tooltip-effect="dark"
          :data="AttachmentData"
        >
          <el-table-column
            min-width="180"
            prop="Attachment_SerialNumber"
            label="附件流水号"
          ></el-table-column>
          <el-table-column
            min-width="180"
            prop="File_Name"
            label="附件名称"
          ></el-table-column>
          <el-table-column
            min-width="180"
            prop="Attachment_URL"
            label="磁盘文件名"
          ></el-table-column>
          <el-table-column
            width="200"
            fixed="right"
            align="center"
            label="操作"
          >
            <template v-slot="{row}">
              <el-button type="primary" size="small" @click="preview(row)">
                在线预览
              </el-button>
              <el-button type="success" size="small" @click="download(row)">
                下载附件
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showDialog1 = false" class="cancel-btn"
              >取消</el-button
            >
          </div>
        </template>
      </el-dialog>
      <yl-online-preview
        :file-url="fileUrl"
        v-model="showDialog2"
      ></yl-online-preview>
    </div>
    <script src="../../../utils/utils.js"></script>
    <script src="../../../config/config.js"></script>
    <script src="../../../utils/mixins.js"></script>
    <script src="../../../yl/vue.js"></script>
    <script src="../../../yl/index.js"></script>
    <script src="../../../yl/zh-cn.mjs"></script>
    <script src="../../../yl/index.iife.min.js"></script>
    <script src="../../../yl/jquery.min.js"></script>
    <script src="../../../utils/jquery.cookie.js"></script>
    <script src="../../../api/request.js"></script>
    <script src="js/index.js"></script>
  </body>
</html>
